<template>
	<div>
		<router-link to="/">
			<h1>{{ msg }}</h1>
		</router-link>

		<div class="box">
			<div @click="tiaozhuan">操作示例</div>
			<div @click="qingqiu">axios请求</div>
			<div @click="vuexdata">设置token</div>
		</div>
		<div class="box">
			vuex存储的token：
			{{this.$store.state.token||'暂无'}}
		</div>

		<el-row class="mb-4">
			<el-button>Default默认</el-button>
			<el-button type="primary">主要</el-button>
			<el-button type="success">成功</el-button>
			<el-button type="info">信息</el-button>
			<el-button type="warning">警告</el-button>
			<el-button type="danger">危险</el-button>
		</el-row>
        
        <el-upload class="avatar-uploader" :action="$api_uploadFile()" :show-file-list="false"
			:on-success="handleAvatarSuccess"  accept="image/png, image/jpeg" >
			<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<el-icon v-else class="avatar">
					<Plus />
				</el-icon>
		</el-upload>
		
	</div>
</template>

<script>
	import {
		login
	} from "@renderer/api/user";

	export default {
		name: "HelloWorld",
		data() {
			return {
				msg: "返回",
                imageUrl:''
			};
		},
		methods: {
            handleAvatarSuccess(e) {
				console.log('Success', e)
				this.imageUrl =  e.url
			},
			qingqiu() {

				// ElMessage({
				// 	message: '成功',
				// 	type: 'success'
				// })

				this.$api_login({
					phone: "15518080162",
					pass: "123456",
					type: 2
				}).then(response => {
					console.log(response);
					if (response.code == 0) {
						ElMessage({
							message: '成功',
							type: 'success'
						});
					}
				}).catch(function(error) {
					ElMessage({
						message: error,
						type: "error"
					});
				});

			},
			tiaozhuan() {

				//this.$router.push("/")
                //打开新窗口
                window.api.windowCreate({
					route: '?id=121212',
					id: 11,
				})

			},
			vuexdata() {
				ElMessage({
					message: 'token储存',
					type: 'success'
				});
				localStorage.setItem("token", "15518080166");
				this.$store.commit("login")
			}
		}
	};
</script>

<!-- 添加“scoped”属性来限制CSS只适用于此组件 -->
<style scoped lang="less">
	.box {
		display: flex;
		justify-content: center;

		div {
			padding: 5px 20px;
			background-color: #41b883;
			margin: 0 20px;
			border-radius: 10px;
			color: #ffffff;
		}
	}

    .avatar-uploader {
	.avatar {
		width: 80px;
		height: 80px;
		display: block;
		border: 1px dashed #dcdfe6;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: .2s;

		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar:hover {
		border-color: #409eff;
	}
}

</style>